<template>
  <div>
    <router-link to = 'luxian'>
      <div class="banner">
       <p>马上计算</p>
      </div>
    </router-link>
    <div class="index_cnt">
     <div class="index_cnt_left">
         <router-link to = 'etc_card'>
            <span><img src="../assets/img/ETC_icon@2x.png"></span>
            <span>ETC充值圈</span>
         </router-link>
         <router-link to = 'luxian'>
            <span><img src="../assets/img/road_icon@2x.png"></span>
            <span>高速通行费及邮费估算</span>
         </router-link>
         
     </div>
     <div class="index_cnt_rgt">
        <router-link to = 'indexone'>
         <dl>
           <dt><img src="../assets/img/roader_icon@2x.png" ></dt>
           <dd>实时路况</dd>
         </dl>
        </router-link>
        <router-link to = ''>
         <dl>
           <dt><img src="../assets/img/weizhang_icon@2x.png" ></dt>
           <dd>违章查询</dd>
         </dl>
        </router-link>
         <router-link to = ''>
         <dl>
           <dt><img src="../assets/img/comen_icon@2x.png"></dt>
           <dd>邀请好友</dd>
         </dl>
        </router-link>
     </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  beforeRouteEnter (to, from, next){
    next(vm => {
      vm.$parent.active = vm.$route.path.replace('/','')
      vm.$parent.title = '首页'
    })
  }
}
</script>

<style scoped lang = 'less'>
@import '.././assets/less/style.less';
.home {
  height: 100%;
  background: #f7f7f7;
  .banner {
    .px2rem(height,300);
    background: url('../assets/img/banner@2x.png');
    background-size: cover;
    position: relative;
    /* img {
      .px2rem(width,750);
      .px2rem(height,300);
    } */
    p {
      position: absolute;
      .right(60);
      .bottom(40);
     /* .margin-top(-90); */
     background: #fff;
     .font(24,#4da79b);
     .padding(10,30,10,30);
     .border-radius(20);
    }
  }
  .index_cnt {
    .px2rem(height,750);
    margin-top: 5%;
    display: flex;
    justify-content: center;
    /* .border(1,solid,#000); */
    .font(30,#fff);
    .index_cnt_left {
      display: flex;
      flex-direction: column;
      width: 45%;
      a {
        /* display: block; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        &:nth-child(1){
          flex: 1;
          background: #19d3c5;
          span {
            .padding-bottom(30);
            img {
              .px2rem(height,130 );
              .px2rem(width,130 );
            }
          }
        }
        &:nth-child(2){
          flex: 1;
          background: #82d65c;
          span:nth-child(1)  {
            .padding-bottom(30);
            img {
              .px2rem(height,130 );
              .px2rem(width,130 );
            }
          }
          span:nth-child(2) {
            width: 75%;
            text-align: center;
            .line-height(50);
          }
        }
      }
    }
    .index_cnt_rgt {
      width: 45%;
      margin-left: 2%;
      display: flex;
      flex-direction: column;
      a {
        display: block;
        flex: 1;
        color: #fff;
        &:nth-child(1){
            background: #f89f37;
          }
          &:nth-child(2){
            background: #38c6f4;
          }
          &:nth-child(3){
            background: #f8d04a;
          }
        }
        dl {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          dd {
            .margin-top(30);
          }
          dt {
            img{
              .px2rem(height,100 );
              .px2rem(width,100 );
            }
          }
          
        }
      
    }
  }
}

</style>
